<template>
  <div class="test">
    <Upload
      ref="upload"
      :show-upload-list="false"
      :on-success="handleSuccess"
      :on-error="handleError"
      :format="['txt','pdf','png']"
      :max-size="2048"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      action="/api/file/upload"
      style="display: inline-block;width:58px;">
      <Button>上传图片</Button>
    </Upload>
    <img v-if="imgId" :src="`/api/file/download/${imgId}`">
    <Button v-if="imgId" type="primary" @click="download">下载图片</Button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgId: null
    }
  },
  methods: {
    handleSuccess (res, file) {
      this.imgId = res.data.id
      // console.log(res)
      // console.log(file)
    },
    handleError (err, file) {
      console.log('error')
      console.log(err)
      // console.log(file)
    },
    handleFormatError (file) {
      console.log('format-error')
      console.log(file)
    },
    handleMaxSize (file) {
      console.log('max-size')
      console.log(file)
    },
    download () {
      this.$http.get(`/api/file/download/${this.imgId}`)
    }
  },
}
</script>
